<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>呈</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="swiper.min.css">
</head>
<style type="text/css">
    body {
        margin: 0;
        height: 0;
        background: #0d0d0d;
        font-family: "Microsoft YaHei";
    }
    header {

    }
    header img {
        width: 100%;
    }
    #img-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    #img-list li {
        width: 33.33%;
        height: 110px;
        overflow: hidden;
        float: left;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    #img-list li img {
        width: 100%;
    }
    #app {
        position: relative;
    }
    #preview {
        position: fixed;
        width: 100%;
        top: 0;
        bottom: 0;
        left: -100%;
        background: rgba(0,0,0,.95);
        color: #fff;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide img {
        width: 100%;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .swiper-pagination-fraction {
        bottom: 10px;
        font-size: 14px;
        color: #fff;
        z-index: 99999;
    }
    .swiper-pagination-current {
        font-size: 24px;
    }
    #download {
        display: none;
        position: absolute;
        bottom: 10px;
        left: 50%;
        margin-left: -22px;
        width: 44px;
        height: 32px;
        background: url("download.png") no-repeat;
        background-size: 44px 32px;
        z-index: 99999;
    }
    .qr-code {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 30px;
        height: 30px;
        z-index: 999999;
        background: url("QR-Code-White.png") no-repeat center center;
        background-size: 22px auto;
        cursor: pointer;
    }
    .close {
        position: absolute;
        width: 30px;
        height: 30px;
        right: 10px;
        top: 10px;
        z-index: 999999;
        background: url("close-btn.png") no-repeat center center;
        background-size: 12px auto;
        cursor: pointer;
    }
    #qr-code-modal {
        display: none;
        background: #fff;
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        top: 0;
        bottom: 0;
        z-index: 9999999;
        text-align: center;
    }
    #qr-code-img {
        margin-top: 100px;
        width: 70%;
        max-width: 300px;
    }
    .qr-code-text {
        font-size: 16px;
        text-align: center;
    }
    @keyframes opacity
    {
        0%   {opacity: 0.2;}
        33%  {opacity: 0.5;}
        66%  {opacity: 0.8;}
        100% {opacity: 1;}
    }
    @-webkit-keyframes opacity
    {
        0%   {opacity: 0.2;}
        33%  {opacity: 0.5;}
        66%  {opacity: 0.8;}
        100% {opacity: 1;}
    }
    .loading {
        background: #000;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        color: #f8f8f8;
        font-size: 10px;
    }
    .loading-cont {
        height: 80px;
        width: 100%;
        position: absolute;
        top: 50%;
        margin-top: -60px;
        text-align: center;
    }
    .loading-img {
        height: 70px;
        background: url("loading2.png") no-repeat center top;
        background-size: 60px auto;
        -webkit-animation: opacity 1s linear infinite alternate;
        animation: opacity 1s linear infinite alternate;
        opacity: 0.2;
    }
</style>
<body>
<div id="app">
    <header></header>
    <ul id="img-list">
    </ul>
</div>
<div id="preview">
    <div class="swiper-container">
        <div class="swiper-wrapper"></div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="qr-code"></div>
    <div class="close preview-close"></div>
    <a href="" download="" id="download"></a>
</div>
<div id="qr-code-modal">
    <div class="close qr-code-close"></div>
    <img id="qr-code-img">
    <div class="qr-code-text">扫描二维码下载视频</div>
</div>
<div class="loading">
    <div class="loading-cont">
        <div class="loading-img"></div>
        <div class="loading-txt">页面正在努力加载中，请稍候...</div>
    </div>
</div>
<script id="list" type="text/html">
    {{each dataList.list}}
        <li class="lazy" data-id="{{$value.id}}" data-original="{{serverUrl}}{{$value.thumPath}}" data-index="{{(dataList.pageNum-1)*dataList.pageSize + $index}}">
        </li>
    {{/each}}
</script>
<script src="jquery-3.2.1.min.js"></script>
<script src="template-web.js"></script>
<script src="swiper.min.js"></script>
<script src="lazyload.min.js"></script>
<script>
    var serverUrl = 'http://www.c7image.com';
    var getActivityImageList = serverUrl + '/bm/getActivityImageList';
    var getImageQr = serverUrl + '/bm/getImageQr';
    var activityId = getQueryString('activityId');
    var page = getQueryString('page') || 1;
    var pages = 1;

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }

    var mySwiper = new Swiper ('.swiper-container', {
        loop: true,
        initialSlide: 0,
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        preloadImages: false,
        lazyLoading: true,
        lazyLoadingInPrevNext: true,
        lazyLoadingInPrevNextAmount: 2,
        onSlideChangeEnd: function(swiper) {
            var path = $('.swiper-slide-active').find('img').attr('src');
            $('#download').attr('href', path);
            getQr($('.swiper-slide-active').data('id'));
        }
    });

    //获取滚动条当前的位置
    function getScrollTop() {
        var scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        }
        else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }

    //获取当前可视范围的高度
    function getClientHeight() {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
        }
        else {
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        }
        return clientHeight;
    }

    //获取文档完整的高度
    function getScrollHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    }
    window.onscroll = function () {
        if (getScrollTop() + getClientHeight() == getScrollHeight()) {
            if(page >= pages) return;
            getActivityImageByPage(activityId, ++page);
        }
    };

    function getActivityImageByPage(activityId, page) {
        var params = {
            activityId: activityId,
            page: page
        };
        $.getJSON(getActivityImageList, params, function(result) {
            var data = result.dataWrapper;
            data.serverUrl = serverUrl;
            if (data.activity.logoPath) {
                $('#app header').html('<img src="'+serverUrl+data.activity.logoPath+'">');
            }
            if (data.activity.name) {
                $('title').html(data.activity.name);
            }
            var html = template('list', data);
            $('#img-list').append(html);
            var swiperArr = [];
            $.each(data.dataList.list, function (index, item) {
                swiperArr.push('<div class="swiper-slide" data-id="'+item.id+'"><img class="swiper-lazy" data-src="'+ serverUrl +item.imagePath+'"></div>');
            });
            pages = data.dataList.pages || 1;
            if (!swiperArr.length) return;
            mySwiper.appendSlide(swiperArr);
            mySwiper.slideTo(1, 0);
            setTimeout(function() {
                $('li.lazy').lazyload();
            }, 0);
        });
    }

    function getQr(id) {
        $.getJSON(getImageQr, {imageId: id}, function (result) {
            var data = result.dataWrapper;
            if (result.status === 0) {
                if (!data.imageQr) {
                    $('.qr-code').hide();
                } else {
                    if (data.imageQr.qrImagePath) {
                        $('.qr-code').show();
                        $('#qr-code-img').attr('src', serverUrl + data.imageQr.qrImagePath);
                    }
                }
            } else {
                $('.qr-code').hide();
            }
        });
    }

    $(function () {
        getActivityImageByPage(activityId, page);

        $("#app").on('click', '#img-list li', function() {
            var $this = $(this);
            var index = $this.data('index');
            var id = $this.data('id');
            $('#preview').css('left', 0);
            mySwiper.slideTo(Number(index) + 1, 0);
        });

        $(document).on('click', '.preview-close', function() {
            $('#preview').css('left', '-100%');
        });

        $(document).on('click', '.qr-code-close', function() {
            $('#qr-code-modal').hide();
        });

        $(document).on('click', '.qr-code', function() {
            $('#qr-code-modal').show();
        });
    });

    setTimeout(function(){
        $('.loading').hide();
    }, 5000);
</script>
</body>
</html>